<template>
  <a-card>
    <div style="display: flex; justify-content: flex-end; margin-bottom: 20px">
      <a-button type="primary"
                icon="plus"
                @click="showModal(false)">{{
        $t("user.verification-code.required1115661105790")
      }}</a-button>
    </div>
    <a-table size="middle"
             class="h-full overflow-x-auto"
             :pagination="false"
             :data-source="listData"
             :rowKey="
        (record, index) => {
          return record.Id;
        }
      ">
      <a-table-column key="DpiaModelTitle"
                      :title="$t('user.verification-code.required1115661105796')">
        <template slot-scope="text, record">
          <div v-if="record.DpiaModelTitle == ''">-</div>
          <div v-else>{{ record.DpiaModelTitle }}</div>
        </template>
      </a-table-column>
      <a-table-column key="DpiaModelType"
                      :title="$t('user.verification-code.required1115661105792')">
        <template slot-scope="text, record">
          <span>
            <div v-if="record.DpiaModelType == 1">
              {{ $t("user.v13") }}
            </div>
            <div v-else>{{ $t("user.v14") }}</div>
          </span>
        </template>
      </a-table-column>
      <a-table-column key="DpiaModelCreateUser"
                      :title="$t('user.verification-code.required1115661105793')">
        <template slot-scope="text, record">
          <div v-if="record.DpiaModelCreateUser == ''">-</div>
          <div v-else>{{ record.DpiaModelCreateUser }}</div>
        </template>
      </a-table-column>
      <a-table-column key="DpiaModelCreatetime"
                      data-index="DpiaModelCreatetime">
        <span slot="title"
              class="min-w-90p">{{
          $t("user.verification-code.required1115661105794")
        }}</span>
      </a-table-column>

      <a-table-column key="Status"
                      :title="$t('user.login.message-invalid-verification-code0011')">
        <template slot-scope="text, record">
          <div v-if="record.DpiaModelStatus == 1">
            <a-badge color="blue" />{{ $t("draft") }}
          </div>
          <div v-if="record.DpiaModelStatus == 2">
            <a-badge status="success" />{{ $t("Active") }}
          </div>
          <div v-if="record.DpiaModelStatus == 3">
            <a-badge color="red" />{{ $t("Offline") }}
          </div>
        </template>
      </a-table-column>
      <a-table-column key="action"
                      :title="$t('app.setting.othersettings')">
        <template slot-scope="text, record">
          <span>
            <a-button type="link"
                      @click="showModal(true, record.Id)">{{
              $t("user.verification-code.required111566147")
            }}</a-button>
            <a-popconfirm :title="$t('user.verification-code.required111566110577225')"
                          :ok-text="$t('user.verification-code.required1166')"
                          :cancel-text="$t('user.email.required11')"
                          
                          @confirm="() => del(record.Id)">
              <a-button type="link"
                        size="small"
                        :disabled="record.Id == 1000 || record.Id == 1001"
                        style="margin-left: 9px">{{
                $t("menu.exception.trigger")
              }}</a-button>
            </a-popconfirm>
          </span>
        </template>
      </a-table-column>
    </a-table>
    <!-- 分页 -->
    <a-pagination size="small"
                  v-model="pagination.page"
                  :total="pagination.total"
                  hideOnSinglePage
                  :pageSize.sync="pagination.pageSize"
                  @change="getList" />

    <!-- 新建模版 -->
    <a-drawer :title="modalTitle"
              placement="right"
              :closable="false"
              :visible="modalVisible"
              @close="closeDrawer"
              :width="900">
      <a-form layout="inline"
              :form="mform">
        <a-form-item label="ID"
                     v-show="false"
                     class="hidden">
          <a-input v-decorator="['id']"
                   disabled />
        </a-form-item>
        <a-form-item :label="$t('user.verification-code.required1115661105796')">
          <a-input :placeholder="$t('user.verification-code.required1115661105796')"
                   v-decorator="[
              'title',
              {
                rules: [
                  {
                    required: true,
                    message: $t(
                      'user.verification-code.required111566110577303'
                    ),
                  },
                ],
              },
            ]" />
        </a-form-item>
        <a-form-item :label="$t('user.verification-code.required1115661105797')">
          <!-- 请选择模版状态 -->
          <a-select v-decorator="[
              'status',
              {
                rules: [
                  {
                    required: true,
                    message: $t(
                      'user.verification-code.required111566110577304'
                    ),
                  },
                ],
              },
            ]"
                    :placeholder="$t('user.verification-code.required1115661105797')"
                    style="width: 158px"
                    option-filter-prop="children"
                    :filter-option="filterOption"
                    show-search>
            <a-select-option v-for="items in modelStatusCode"
                             :value="items.value"
                             :key="items.value">{{ items.label }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('user.verification-code.required1115661105792')">
          <a-select v-decorator="[
              'type',
              {
                rules: [
                  {
                    required: true,
                    message: $t(
                      'user.verification-code.required111566110577305'
                    ),
                  },
                ],
              },
            ]"
                    :placeholder="$t('user.verification-code.required1115661105792')"
                    style="width: 158px">
            <a-select-option v-for="items in modelTypeCode"
                             :value="items.value"
                             :key="items.value">{{ $t(items.label) }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      <div class="">
        <div class="mt-[15px]">
          <p>
            {{ $t("user.verification-code.required111566110577101") }}
            <a-button type="primary"
                      size="small"
                      @click="[(chapterName = ''), (createPageVisible = true)]">{{
                $t("user.verification-code.required111566110577102")
              }}</a-button>
          </p>
          <a-card :bordered="false">
            <a-table ref="table"
                     size="middle"
                     class="h-full overflow-x-auto mt-[15px]"
                     :dataSource="chapterListData"
                     :pagination="false"
                     :expandedRowKeys="chapterExpandedRowKeys"
                     @expandedRowsChange="chapterExpandedRowsChange"
                     @change="chapterTableChange"
                     :loading="chapterListLoading"
                     :rowKey="
                (record, index) => {
                  return record.Id;
                }
              ">
              <a-table-column key="DpiaModelChapterTitle"
                              data-index="DpiaModelChapterTitle">
                <span slot="title"
                      class="min-w-90p">{{
                  $t("user.verification-code.required1115661105761")
                }}</span>
              </a-table-column>
              <a-table-column key="DpiaModelChapterCreatetime"
                              data-index="DpiaModelChapterCreatetime">
                <span slot="title"
                      class="min-w-90p">{{
                  $t("user.verification-code.required111566131")
                }}</span>
              </a-table-column>
              <a-table-column key="action"
                              :title="$t('app.setting.othersettings')">
                <template slot-scope="text, record">
                  <span>
                    <div class="flex">
                      <a-button type="link"
                                block
                                @click="createModelTopic(record.Id)">{{
                          $t("user.verification-code.required111566110577103")
                        }}</a-button>
                      <a-button type="link"
                                block
                                @click="editModelChapter(record)">{{
                          $t("user.verification-code.required111566110577104")
                        }}</a-button>
                      <a-popconfirm :title="
                          $t('user.verification-code.required111566110577225')
                        "
                                    :ok-text="$t('user.verification-code.required1166')"
                                    :cancel-text="$t('user.email.required11')"
                                    @confirm="delModelChapter(record.Id)">
                        <a-button type="link"
                                  block>{{
                          $t("user.verification-code.required111566110577105")
                        }}</a-button>
                      </a-popconfirm>
                    </div>
                  </span>
                </template>
              </a-table-column>
              <!-- 题目的table列表 -->
              <a-table ref="table"
                       size="middle"
                       class="h-full overflow-x-auto mt-[15px]"
                       slot="expandedRowRender"
                       slot-scope="text"
                       :dataSource="chapterTopicListData"
                       :pagination="true"
                       :loading="topicListLoading"
                       :rowKey="
                  (record, index) => {
                    return index;
                  }
                ">
                <!-- 题目ID -->
                <a-table-column key="TopicId"
                                data-index="TopicId">
                  <span slot="title"
                        class="min-w-90p">{{
                    $t("user.verification-code.required111566110577107")
                  }}</span>
                </a-table-column>
                <a-table-column key="TopicTitle"
                                data-index="TopicTitle">
                  <span slot="title"
                        class="min-w-90p">{{
                    $t("user.verification-code.required111566110577108")
                  }}</span>
                </a-table-column>
                <a-table-column key="DpiaModelChapterTopicCreatetime"
                                data-index="DpiaModelChapterTopicCreatetime">
                  <span slot="title"
                        class="min-w-90p">{{
                    $t("user.verification-code.required111566131")
                  }}</span>
                </a-table-column>
                <a-table-column key="action"
                                :title="$t('app.setting.othersettings')">
                  <template slot-scope="text, record">
                    <span>
                      <div class="flex">
                        <!-- 修改 -->
                        <a-button type="link"
                                  block
                                  @click="editModelTopic(record)">{{
                            $t("user.verification-code.required11156611014")
                          }}</a-button>
                        <a-popconfirm :title="
                            $t('user.verification-code.required111566110577225')
                          "
                                      :ok-text="$t('user.verification-code.required1166')"
                                      :cancel-text="$t('user.email.required11')"
                                      @confirm="delModelTopic(record.Id)">
                          <a-button type="link"
                                    block>{{
                            $t(
                              "user.verification-code.required1115661105771051"
                            )
                          }}</a-button>
                        </a-popconfirm>
                      </div>
                    </span>
                  </template>
                </a-table-column>
              </a-table>
            </a-table>
            <!-- 分页 -->
            <a-pagination size="small"
                          v-model="chapterPagination.page"
                          :total="chapterPagination.total"
                          hideOnSinglePage
                          :pageSize.sync="chapterPagination.pageSize"
                          @change="getChapterList(modelId)" />
          </a-card>
          <!-- 章节的Table列表 -->
        </div>
      </div>
      <div :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'center',
          zIndex: 1,
        }">
        <a-button style="margin-right: 8px"
                  @click="closeDrawer">{{
          $t("user.email.required11")
        }}</a-button>
        <a-button type="primary"
                  @click="submitCreateDpiaModel">{{
          $t("user.verification-code.required111566165")
        }}</a-button>
      </div>
    </a-drawer>
    <!-- 新增章节 -->
    <a-modal :title="$t('user.verification-code.required111566110577102')"
             :visible="createPageVisible"
             centered
             @ok="submitCreateChapter"
             :ok-text="$t('user.verification-code.required1166')"
             :cancel-text="$t('user.email.required11')"
             @cancel="createPageVisible = false">
      <a-form layout="inline">
        <a-form-item :label="$t('user.verification-code.required111566110577102')">
          <a-input v-model="chapterName"
                   :placeholder="$t('user.verification-code.required111566110577102')"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 新增题目 -->
    <a-modal :title="$t('user.verification-code.required111566110577106')"
             :visible="createVisible"
             centered
             @ok="submitCreateTopic"
             @cancel="
        createVisible = false;
        value1 = '';
      "
             width="934px">
      <a-form layout="inline"
              :form="form"
              class="drawer-form"
              label-align="left">
        <a-form-item label="ID"
                     v-show="false"
                     class="hidden">
          <a-input v-decorator="['ChapterId']"
                   disabled />
        </a-form-item>
        <a-form-item label="ID2"
                     v-show="false"
                     class="hidden">
          <a-input v-decorator="['Id']"
                   disabled />
        </a-form-item>
        <a-form-item :label="$t('user.verification-code.required111566110577107')">
          <a-input v-decorator="[
              'TopicIdStr',
              {
                rules: [
                  {
                    required: true,
                    message: $t(
                      'user.verification-code.required111566110577306'
                    ),
                  },
                ],
              },
            ]"
                   :placeholder="$t('user.verification-code.required111566110577107')"
                   disabled
                   style="min-width: 200px" />
        </a-form-item>
        <a-form-item :label="$t('user.verification-code.required111566110577108')">
          <a-select show-search
                    v-decorator="[
              'TopicId',
              {
                rules: [
                  {
                    required: true,
                    message: $t(
                      'user.verification-code.required111566110577307'
                    ),
                  },
                ],
              },
            ]"
                    :placeholder="$t('user.verification-code.required111566110577108')"
                    class="selectinput"
                    style="width: 400px"
                    :filter-option="filterOption"
                    option-filter-prop="children"
                    @change="changeTopicSelect">
            <a-select-option v-for="items in dpiaTopicSelect"
                             :value="items.value"
                             :key="items.value">{{ items.label }}</a-select-option>
          </a-select>
          <!-- 1111111 -->
          <a-textarea v-model="value1"
                      :auto-size="{ minRows: 3, maxRows: 5 }" />
        </a-form-item>
        <a-divider>{{
          $t("user.verification-code.required111566110577125")
        }}</a-divider>
        <!-- 题目触发action -->
        <a-form-item :label="$t('user.verification-code.toaction')"
                     style="margin-left: 10px">
          <a-select show-search
                    v-decorator="['TopicActions']"
                    mode="multiple"
                    placeholder="Action"
                    option-filter-prop="children"
                    style="min-width: 200px; margin-left: -9px"
                    :filter-option="filterOption1"
                    @focus="handleFocus"
                    @blur="handleBlur"
                    @change="handleChange">
            <a-select-option v-for="items in dpiaActionSelect"
                             :value="items.value"
                             :key="items.value">{{ items.label }}</a-select-option>
          </a-select>
        </a-form-item>
        <!-- 题目被触发条件：(数据处理活动周期) -->
        <a-form-item :label="$t('user.verification-code.required111566110577126')"
                     style="margin-left: 10px">
          <a-select mode="multiple"
                    option-filter-prop="children"
                    :filter-option="filterOption"
                    show-search
                    v-decorator="['RpaActivityCycle']"
                    :placeholder="$t('user.verification-code.required111566110577126')"
                    style="min-width: 200px; margin-left: -9px"
                    @change="changeAction">
            <a-select-option v-for="items in dataProcessingActivityCycleData"
                             :value="items.value"
                             :key="items.value">{{ items.label }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('user.verification-code.required111566110577127')"
                     style="margin-left: 10px">
          <a-select mode="multiple"
                    v-decorator="['RpaActivityType']"
                    option-filter-prop="children"
                    :filter-option="filterOption"
                    show-search
                    :placeholder="$t('user.verification-code.required111566110577127')"
                    style="min-width: 200px; margin-left: -9px">
            <a-select-option v-for="items in processingActivityTypesData"
                             :value="items.value"
                             :key="items.value">{{ items.label }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="item.Option"
                     v-for="item in answerLists">
          <a-select v-decorator="['Action-' + item.Value]"
                    mode="multiple"
                    style="width: 200px"
                    placeholder="Action">
            <a-select-option v-for="items in dpiaActionSelect"
                             :value="items.value"
                             :key="items.value"
                             option-filter-prop="children"
                             :filter-option="filterOption"
                             show-search
                             style="width: 200px">
              {{ items.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <div class="absolute right-0 bottom-0 w-full px-4 py-[10px] bg-white text-left z-1 flex justify-center">
          <a-row class="w-full"
                 :gutter="24">
            <a-col :span="12">
              <!-- 返回 -->
              <a-button class="w-full border-none hover:bg-[#3F8CFF] hover:bg-opacity-5 shadow"
                        @click="
                  createVisible = false;
                  value1 = '';
                ">{{ $t("app.setting.themecolor.rr") }}</a-button>
            </a-col>
            <a-col :span="12">
              <a-button :loading="createVisibleLoading"
                        class="w-full border-none shadow"
                        type="primary"
                        @click.native.prevent="submitCreateTopic()">
                <span v-if="!createVisibleLoading">{{
                  $t("app.setting.themecolor.ss")
                }}</span>
                <span v-else>{{ $t("app.setting.themecolor.tt") }}...</span>
              </a-button>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script>
const baseColumns = [
  {
    title: '模板名称',
    dataIndex: 'DpiaModelTitle',
    align: 'center',
  },
  {
    title: '模板类型',
    dataIndex: 'DpiaModelType',
    scopedSlots: { customRender: 'modelTypeAction' },
    align: 'center',
  },
  {
    title: '创建人',
    dataIndex: 'DpiaModelCreateUser',
    scopedSlots: { customRender: 'createUserAction' },
    align: 'center',
  },
  {
    title: '最后更新时间',
    dataIndex: 'DpiaModelCreatetime',
    align: 'center',
  },
  {
    title: '状态',
    dataIndex: 'DpiaModelStatus',
    scopedSlots: { customRender: 'statusAction' },
    align: 'center',
  },
  {
    title: '操作',
    width: '250px',
    dataIndex: '',
    align: 'center',
    scopedSlots: { customRender: 'action' },
    align: 'center',
  },
]

const chapterColumns = [
  {
    title: '章节',
    dataIndex: 'DpiaModelChapterTitle',
    align: 'center',
  },
  {
    title: '创建时间',
    dataIndex: 'DpiaModelChapterCreatetime',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: '',
    align: 'center',
    scopedSlots: { customRender: 'action' },
  },
]

const topicColumns = [
  {
    title: '题目编号',
    dataIndex: 'TopicId',
    align: 'center',
  },
  {
    title: '题目名称',
    dataIndex: 'TopicTitle',
    align: 'center',
  },
  {
    title: '创建时间',
    dataIndex: 'DpiaModelChapterTopicCreatetime',
    align: 'center',
  },
  {
    title: '操作',
    width: '250px',
    dataIndex: '',
    align: 'center',
    scopedSlots: { customRender: 'action' },
  },
]

import { configurationSelect } from '@/api/configs'

import {
  dpiaModelLists,
  dpiaModelChapterLists,
  dpiaModelCreate,
  dpiaModeldelete,
  dpiaModelChange,
  dpiaModelRead,
  dpiaModelChapterChange,
  dpiaChapterCreate,
  dpiaQuestionCreate,
  dpiaDropDownLists,
  dpiaQuestionAnswer,
  dpiaModelChapterTopicLists,
  dpiaModelChapterDelete,
  dpiaModelChapterTopicDelete,
} from '@/api/dpia/form'

import { dpiaChapterTopicCreate, dpiaChapterTopicChange } from '@/api/dpia/json'

export default {
  data() {
    return {
      form: this.$form.createForm(this),
      mform: this.$form.createForm(this),
      visibleq: false,
      baseColumns,
      // 模版状态
      modelStatusCode: [
        { label: 'Draft', value: 1 },
        { label: 'Active', value: 2 },
        { label: 'Offline', value: 3 },
      ],
      // 模版类型
      modelTypeCode: [
        { label: 'user.v13', value: 1 },
        { label: 'user.v14', value: 2 },
      ],
      // 章节名称
      chapterName: '',
      // 创建模版的ID
      modelId: '',
      modalVisible: false,
      modalTitle: '',
      addQuestionVis: false,
      createPageVisible: false,
      createVisible: false,
      probType: undefined,
      itemNum: 0,
      value22: '',
      value1: '',
      // 标题管理
      chapterColumns,
      topicColumns,
      // 主列表
      listData: [],
      // 章节列表
      chapterListData: [],
      // 题目列表
      topicListData: [],
      // 章节题目列表
      chapterTopicListData: [],
      // 章节的列表状态
      chapterListLoading: false,
      // 题目列表的状态
      topicListLoading: false,
      // 章节选择的记录
      chapterExpandedRowKeys: [],
      // 章节题目列表分页
      chapterTopicPagination: {
        page: 1, //当前页
        pageSize: 10, //每页条数
        total: 0, //总条数
        showQuickJumper: true,
        hideOnSinglePage: true,
      },
      // 主列表分页
      pagination: {
        page: 1, //当前页
        pageSize: 10, //每页条数
        total: 0, //总条数
        showQuickJumper: true,
        hideOnSinglePage: true,
      },
      // 章节列表分页
      chapterPagination: {
        page: 1, //当前页
        pageSize: 10, //每页条数
        total: 0, //总条数
        showQuickJumper: true,
        hideOnSinglePage: true,
      },
      // DPIA的题目下拉
      dpiaTopicSelect: [],
      // DPIA的Action下拉
      dpiaActionSelect: [],
      // 数据处理活动周期下拉
      dataProcessingActivityCycleData: [],
      // 数据处理活动类型下拉
      processingActivityTypesData: [],
      // 创建题目的Loading
      createVisibleLoading: false,
      // 新建题目答案列表
      answerLists: [],
      // 章节题目ID
      chapterTopicId: '',
      // 章节主键ID，用于修改
      chapterKeyId: 0,
      // 修改的主题目记录
      editModelID: 0,
      //   题目类型
      TopicType: 1,
    }
  },
  created() {
    this.init()
  },
  methods: {
    handleBlur() {
      console.log('blur')
    },
    handleFocus() {
      console.log('focus')
    },
    filterOption1(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )
    },
    async submitCreateDpiaModel() {
      // 新增DPIA模版保存
      const {
        mform: { validateFields },
      } = this
      // validateFields 是校验form表单数据
      // force: true 是默认所有字段都校验
      // values 表单的值
      validateFields({ force: true }, async (err, values) => {
        if (!err) {
          const params = { ...values }
          try {
            const { data } = await dpiaModelChange({ ...params })
            this.$message.success(
              this.$t('user.verification-code.required111566110577308')
            )
            this.modalVisible = false
            this.getList()
          } catch (error) {
            this.$message.error(error)
          } finally {
          }
        } else {
          setTimeout(() => {}, 600)
        }
      })
    },
    async changeTopicSelect(e) {
      console.log('e', e)
      this.value22 = e
      // 修改题目下拉内容
      var topicIdStr = ''
      var topicValStr = ''
      let value1 = ''
      for (var i = 0; i < this.dpiaTopicSelect.length; i++) {
        if (this.dpiaTopicSelect[i].value == parseInt(e)) {
          topicIdStr = this.dpiaTopicSelect[i].id
          topicValStr = this.dpiaTopicSelect[i].value
        }
        if (this.dpiaTopicSelect[i].value == this.value22) {
          value1 = this.dpiaTopicSelect[i].label
        }
        this.value1 = value1
      }
      // 修改内容
      this.form.setFieldsValue({
        TopicIdStr: topicIdStr,
      })
      // 获取答案
      const { data } = await dpiaQuestionAnswer({
        TopicId: topicValStr,
        ModelId: this.editModelID,
      })
      console.log('data23423', data)
      // 遍历出答案
      this.answerLists = []
      this.setVals = {}
      this.TopicType = data.topic.TopicType
      for (var i = 0; i < data.answer.length; i++) {
        if (data.answer[i].Actions != '') {
          var ids = data.answer[i].Actions.split(',')
          var idArr = []
          for (var t = 0; t < ids.length; t++) {
            idArr.push(parseInt(ids[t]))
          }
          this.setVals['Action-' + data.answer[i].Id] = idArr
        }

        this.answerLists.push({
          Option: data.answer[i].AnswerInfo,
          Value: data.answer[i].Id,
        })
      }

      // 清晰选项
      var tempLists = []
      for (var k = 0; k < this.answerLists.length; k++) {
        this.answerLists[k].Option =
          this.$t('user.verification-code.required111566110577182') +
          this.answerLists[k].Option +
          this.$t('user.verification-code.toactionon')
        tempLists.push(this.answerLists[k])
      }
      this.answerLists = tempLists

      if (this.setVals != {}) {
        await this.$nextTick()
        this.form.setFieldsValue(this.setVals)
      }
    },
    // 实时查询
    changeAction(e) {
      console.log(e)
    },
    async init() {
      // 初始化下拉题库
      const { data: dpiaTopicSelect } = await dpiaDropDownLists({ Types: 1 })
      // 初始化下拉Action
      const { data: dpiaActionSelect } = await dpiaDropDownLists({ Types: 2 })
      // 加载数据处理活动周期
      const { data: dataProcessingActivityCycleData } =
        await configurationSelect({ state: 6 })
      // 加载数据处理活动类型
      const { data: processingActivityTypesData } = await configurationSelect({
        state: 7,
      })

      this.dpiaTopicSelect = dpiaTopicSelect
      this.dpiaActionSelect = dpiaActionSelect
      // console.log('dpiaActionSelect',dpiaActionSelect);
      this.dataProcessingActivityCycleData = dataProcessingActivityCycleData
      this.processingActivityTypesData = processingActivityTypesData
      this.getList()
    },
    async submitCreateTopic() {
      // 提交题目创建
      const {
        form: { validateFields },
      } = this
      // 按钮loading
      this.loading = true
      // validateFields 是校验form表单数据
      // force: true 是默认所有字段都校验
      // values 表单的值
      validateFields({ force: true }, async (err, values) => {
        if (!err) {
          const params = { ...values }
          console.log('params', params)
          // console.log(values.TopicActions.join());
          // 组成答案
          var data = []
          // 处理Action
          var paramsKey = Object.keys(values)
          for (var i = 0; i < paramsKey.length; i++) {
            var items = paramsKey[i].split('-')
            if (items.length == 2) {
              // 是action
              var ActionItems = {
                answerId: items[1],
              }
              if (values[paramsKey[i]] != undefined) {
                ActionItems.actionId = values[paramsKey[i]].join()
              } else {
                ActionItems.actionId = ''
              }
              data.push(ActionItems)
            }
          }

          var RpaActivityCycleJoin = ''
          var RpaActivityTypesJoin = ''
          if (params.RpaActivityCycle) {
            RpaActivityCycleJoin = params.RpaActivityCycle.join()
          } else {
            RpaActivityCycleJoin = undefined
          }

          if (params.RpaActivityType) {
            RpaActivityTypesJoin = params.RpaActivityType.join()
          } else {
            RpaActivityTypesJoin = undefined
          }
          params.RpaActivityCycle = RpaActivityCycleJoin
          params.RpaActivityTypes = RpaActivityTypesJoin

          params.data = data
          if (params.TopicActions) {
            params.TopicActions = params.TopicActions.join()
          }
          // 增加题目类型字段
          if (this.TopicType == 6 || this.TopicType == 7) {
            params.TopicType = this.TopicType
          }
          try {
            const { data } = await dpiaChapterTopicCreate(params)
            this.$message.success(
              this.$t('user.verification-code.required111566110577230')
            )
            this.createVisible = false
            this.getChapterTopicList(this.chapterTopicId)
          } catch (error) {
            this.$message.error(error)
          } finally {
            this.loading = false
          }
        } else {
          setTimeout(() => {
            this.loading = false
          }, 600)
        }
      })
    },
    async createModelTopic(id) {
      console.log(id)
      // 新增章节题目
      this.form.resetFields()
      this.createVisible = true
      await this.$nextTick()
      this.form.setFieldsValue({
        ChapterId: id,
      })
    },
    async editModelTopic(record) {
      console.log(record)
      // 读取章节题目编辑
      this.form.resetFields()
      this.createVisible = true

      var rpaActivityCycleList = []
      var rpaActivityTypeList = []
      var dpiaTopicActions = []
      if (
        record.DpiaModelChapterTopicRpaActivityCycle &&
        record.DpiaModelChapterTopicRpaActivityCycle !== 'NaN'
      ) {
        var rpaActivityCycle =
          record.DpiaModelChapterTopicRpaActivityCycle.split(',')
        for (var i = 0; i < rpaActivityCycle.length; i++) {
          rpaActivityCycleList.push(parseInt(rpaActivityCycle[i]))
        }
      }
      if (
        record.DpiaModelChapterTopicRpaActivityTypes &&
        record.DpiaModelChapterTopicRpaActivityTypes !== 'NaN'
      ) {
        var rpaActivityType =
          record.DpiaModelChapterTopicRpaActivityTypes.split(',')
        for (var i = 0; i < rpaActivityType.length; i++) {
          if (rpaActivityType[i]) {
            rpaActivityTypeList.push(parseInt(rpaActivityType[i]))
          }
        }
      }

      //处理题目触发action为number
      if (record.DpiaTopicActions && record.DpiaTopicActions !== 'NaN') {
        let arr = record.DpiaTopicActions.split(',')
        arr.forEach((item) => {
          dpiaTopicActions.push(parseInt(item))
        })
      }
      await this.$nextTick()
      this.editModelID = record.DpiaModelChapterId
      this.form.setFieldsValue({
        ChapterId: record.DpiaModelChapterId,
        TopicActions: dpiaTopicActions,
        TopicIdStr: record.TopicId,
        TopicId: record.DpiaModelChapterTopicId,
        RpaActivityCycle: rpaActivityCycleList,
        RpaActivityType: rpaActivityTypeList,
        Id: record.Id,
      })

      this.changeTopicSelect(record.DpiaModelChapterTopicId)
    },
    async delModelTopic(id) {
      // 章节题目删除
      try {
        await dpiaModelChapterTopicDelete({ Id: id })
        this.$message.success(
          this.$t('user.verification-code.required111566110577309')
        )
        // 章节列表
        this.chapterTopicPagination.page = 1
        this.getChapterTopicList(this.chapterTopicId)
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    async delModelChapter(id) {
      // 章节删除
      try {
        await dpiaModelChapterDelete({ id: id })
        this.$message.success(
          this.$t('user.verification-code.required111566110577310')
        )
        // 章节列表
        this.chapterPagination.page = 1
        this.getChapterList(this.modelId)
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    async editModelChapter(record) {
      // 修改章节
      this.chapterName = record.DpiaModelChapterTitle
      this.modelId = record.DpiaModelId
      this.chapterKeyId = record.Id
      this.createPageVisible = true
    },
    chapterExpandedRowsChange(e, i) {
      if (e.length > 0) {
        this.chapterExpandedRowKeys = [e[e.length - 1]]
        // 缓存章节题目
        this.chapterTopicId = this.chapterExpandedRowKeys[0]
        // 获取章节题目列表
        this.getChapterTopicList(this.chapterExpandedRowKeys[0])
      } else {
        this.chapterExpandedRowKeys = []
      }
    },
    async chapterTableChange(e, i, d) {
      console.log('chapterTableChange: ', e, i, d)
      this.getChapterList(e.current, this.modelId)
    },
    async submitCreateChapter() {
      await this.$nextTick()
      // 修改
      try {
        if (this.chapterKeyId == 0) {
          await dpiaChapterCreate({
            id: this.modelId,
            title: this.chapterName,
          })
          this.$message.success(
            this.$t('user.verification-code.required111566110577230')
          )
        } else {
          await dpiaModelChapterChange({
            id: this.chapterKeyId,
            title: this.chapterName,
          })
          this.$message.success(
            this.$t('user.verification-code.required111566110577229')
          )
          this.chapterKeyId = 0
        }
        this.chapterKeyId = 0
        this.createPageVisible = false
        // 章节列表
        this.chapterPagination.page = 1
        this.getChapterList(this.modelId)
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    handleOkk(e) {
      this.visibleq = false
    },
    // 新增题目
    async submitCreate() {
      await this.$nextTick()
      // 修改
      try {
        await dpiaQuestionCreate({})
        this.$message.success(
          this.$t('user.verification-code.required111566110577230')
        )
        this.createVisible = false
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    async getList() {
      // 获取主列表
      this.listLoading = true
      const { page, pageSize } = this.pagination
      try {
        // 调用查询列表
        const { data } = await dpiaModelLists({
          ...{ page, pageSize },
          ...this.queryForm,
        })
        // 解构赋值
        const { Page, PageSize, Total, Lists } = data
        // 给table赋值
        this.listData = Lists || []
        console.log('lisData', this.listData)
        // 给分页数据赋值
        this.pagination = {
          page: Page,
          pageSize: PageSize,
          total: Total,
        }
      } catch (error) {
        // 报错信息
        this.$message.error(error)
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false
      }
    },
    async getChapterList(id) {
      // 获取章节列表
      await this.$nextTick()
      this.listLoading = true
      const { page, pageSize } = this.chapterPagination
      try {
        // 调用查询列表
        const { data } = await dpiaModelChapterLists({
          ...{ page, pageSize },
          ...{ id: id },
        })
        // 解构赋值
        const { Page, PageSize, Total, Lists } = data
        // 给table赋值
        this.chapterListData = Lists || []
        // 给分页数据赋值
        this.chapterPagination = {
          page: Page,
          pageSize: PageSize,
          total: Total,
        }
      } catch (error) {
        // 报错信息
        this.$message.error(error)
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false
      }
    },
    async getChapterTopicList(id) {
      // 获取章节题目列表
      await this.$nextTick()
      this.listLoading = true
      const { page, pageSize } = this.chapterTopicPagination
      try {
        // 调用查询列表
        const { data } = await dpiaModelChapterTopicLists({
          ...{ page, pageSize },
          ...{ chapterId: id },
        })
        // 解构赋值
        const { Page, PageSize, Total, Lists } = data
        // 给table赋值
        this.chapterTopicListData = Lists || []

        this.chapterTopicListData.forEach((item) => {
          if (item.DpiaModelChapterTopicRpaActivityTypes == '') {
            item.DpiaModelChapterTopicRpaActivityTypes = undefined
          } else {
            item.DpiaModelChapterTopicRpaActivityTypes =
              item.DpiaModelChapterTopicRpaActivityTypes
          }
        })
        console.log('this.chapterTopicListData', this.chapterTopicListData)

        // 给分页数据赋值
        this.chapterTopicPagination = {
          page: Page,
          pageSize: PageSize,
          total: Total,
        }
      } catch (error) {
        // 报错信息
        this.$message.error(error)
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false
      }
    },
    async showModal(isedit, id) {
      console.log(id)
      if (isedit) {
        this.modelId = ''
        this.mform.resetFields()
        this.modalTitle = this.$t(
          'user.verification-code.required111566110577159'
        )
        this.modelId = id
        this.getChapterList(id)
        this.modalVisible = true
        this.modelId = id
        const { data } = await dpiaModelRead({ id: id })

        this.form.getFieldDecorator('keys', {
          initialValue: [0],
          preserve: true,
        })

        await this.$nextTick()
        this.mform.setFieldsValue({
          id: id,
          title: data.DpiaModelTitle,
          status: data.DpiaModelStatus,
          type: data.DpiaModelType,
        })
      } else {
        this.mform.resetFields()
        // 新增时先初始化一个ID
        const { data } = await dpiaModelCreate()
        this.modelId = data
        this.modalTitle = this.$t(
          'user.verification-code.required111566110577158'
        )
        // 初始化章节列表
        this.getChapterList(data)
        this.modalVisible = true

        this.form.getFieldDecorator('keys', {
          initialValue: [0],
          preserve: true,
        })

        await this.$nextTick()
        this.mform.setFieldsValue({
          id: data,
        })
      }
      this.modalVisible = true
    },
    // 关闭抽屉
    closeDrawer() {
      this.modalVisible = false
      this.value1 = ''
    },
    closeDrawer1() {
      this.addQuestionVis = false
    },

    // 删除
    confirm(e) {
      console.log(e)
      this.$message.success(
        this.$t('user.verification-code.required111566110577133')
      )
    },
    cancel(e) {
      console.log(e)
      this.$message.warning(
        this.$t('user.verification-code.required111566110577313')
      )
    },

    handleChange(value) {
      console.log(`selected ${value}`)
    },
    handleChanges(value) {
      console.log(`selected ${value}`)
    },
    // 题目类型
    handleChangeProbType(value) {
      console.log(value, this.probType)
      if (this.probType == 3) this.itemNum = 0
    },
    handleChangeItemNum(value) {
      console.log(value, this.itemNum)
    },
    //题目名称查询
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )
    },
    // 多选
    onChange(e) {
      console.log(`checked = ${e.target.checked}`)
    },
    /**
     * 删除 通用的
     * @param {*} id
     */
    async del(id) {
      await this.$nextTick()
      try {
        // 传过来的id直接请求删除api
        await dpiaModeldelete({ id: id })
        this.$message.success(
          this.$t('user.verification-code.required111566110577210')
        )
        // 重新初始化列表刷新数据
        this.getList()
      } catch (error) {
        this.$message.error(error)
      } finally {
      }
    },
  },
}
</script>

<style lang="less" scoped>
.tables {
  display: flex;

  .tables-right {
    flex: 1;
    margin-left: 50px;
  }
}

.ant-pagination {
  float: right;
}

/deep/.drawer-form {
  margin-bottom: 20px;

  .ant-form-item-label {
    display: inline-block;
    line-height: 40px;
    width: 440px;
    margin-right: 10px;
  }
}

/deep/.select-drop .ant-select-dropdown-menu-item {
  white-space: normal;
  word-break: break-all;
}

/deep/.selectinput {
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>